<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="查看详情" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="taibox">
			<view class="taitop">
				<!-- 举报按钮 -->
				<image :src="'/images/bao.png' | formatImgUrl" @click="show = true" class="jubox" mode=""></image>
				<image :src="'/images/myhead.png' | formatImgUrl" class="taihead" mode=""></image>
				<view class="taiyou">
					<view class="yoa">
						<view class="nametxt">
							遥想公瑾当年
						</view>
						<image :src="'/images/ja.png' | formatImgUrl" class="jipic" mode=""></image>
						<image :src="'/images/jb.png' | formatImgUrl" class="biepic" mode=""></image>
					</view>
					<view class="baobox">
						<view class="baofen">
							精彩必看
						</view>
						<view class="baotime">
							2030 年 05 月 01 日 18:34
						</view>
					</view>
				</view>
			</view>
			<view class="baotitle">
				遥想公瑾当年
			</view>
			<view class="baotxt">
				皇甫松，字子奇，自号檀栾子，睦州新安人。他是工部侍郎皇甫湜之子，宰相牛僧孺之外甥。《新唐书·艺文志》著录皇甫松《醉乡日月》3卷。其词今存20余首，见于《花间集》、《唐五代词》。事迹见《历代诗馀》。今有王国维辑《檀栾子词》一卷。
			</view>
			<image :src="'/images/futu.png' | formatImgUrl" class="fupic" mode="widthFix"></image>
			<view class="erbox">
				<view class="rili" v-for="item in erList">
					#{{item.qian}}
				</view>
			</view>
		</view>
		<view class="winbox">
			<view class="winli" v-for="(item , index) in lunList" :key="index">
				<image :src="item.head" class="headpic" mode=""></image>
				<view class="winyou">
					<view class="wintop">
						<view class="nametxt">
							{{item.nickname}}
						</view>
						<image :src="'/images/ja.png' | formatImgUrl" class="jipic" mode=""></image>
						<image :src="'/images/jb.png' | formatImgUrl" class="biepic" mode=""></image>
					</view>
					<view class="fuben">
						{{item.fuwen}}
					</view>
					<view class="huifu" @click="$go('/pages/find/review')">
						{{item.hui}}
					</view>
					<view class="windi">
						<view class="wintime">
							{{item.time}}
						</view>
						<view class="zabox" @click="toggleLike(index)">
							<img :src="item.isLiked ? '/static/images/zz1.png' : '../../static/images/zz.png'" class="zapic" >
							<view class="zatxt" :class="{zaactive:item.istrue}">
								{{item.zan}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 举报弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="matop" @click="goToedit">
					<view class="matxt" >
						编辑
					</view>
					<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="matop" @click="goToreport">
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 举报弹框
				show:false,
				 //苹果X以上手机底部适配高度
				paddingBottomHeight: 0,
				// 标签
				erList: [{
						qian: '二次元'
					},
					{
						qian: '萝莉'
					},
					{
						qian: '漫画'
					}
				],
				// 评论列表
				lunList: [{
					istrue:false,
						isLiked: false,
						head: 'https://dream-yw.web.hlidc.cn/images/headd.png',
						nickname: '赢得仓皇北顾',
						fuwen: '吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑，缘督以为经，可以保身，可以全生，可以养亲，可以尽年。',
						hui: '共14条回复>',
						time: '2048 - 12 - 12 22:16',
						zan: '710'
					},
					{
						istrue:false,
						isLiked: false,
						head: 'https://dream-yw.web.hlidc.cn/images/heada.png',
						nickname: '赢得仓皇北顾',
						fuwen: '吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑，缘督以为经，可以保身，可以全生，可以养亲，可以尽年。',
						hui: '共14条回复>',
						time: '2048 - 12 - 12 22:16',
						zan: '710'
					}
				],
				
			}
		},
		onLoad() {

		},
		created() {
		   let that = this;
		   uni.getSystemInfo({
		      success: function(res) {
		         let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
		         model.forEach(item => {
		            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
		            if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
		               that.paddingBottomHeight = 40;
		            }
		         })
		      }
		   });
				 var url = getCurrentPages() 
				 this.urlPath = '/' + url[0].route
				 
		},
		methods: {
			toggleLike(index) {
				console.log(index)
				this.lunList[index].isLiked = !this.lunList[index].isLiked
				this.lunList[index].istrue = !this.lunList[index].istrue
				// this.lunList[index].zan++;
				// if (this.lunList[index].zan === 0) {
				// 	this.lunList[index].zan++;
				//   } else {
				// 	this.lunList[index].zan--;
				//   }
			},
			
			// 举报弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			goToreport(){
				this.show = false
				uni.navigateTo({
					url:'/pages/find/report'
				})
			},
			// 编辑
			goToedit(){
				this.show = false
				uni.navigateTo({
					url:'/pages/user/edit'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		.taibox {
			padding: 20rpx 30rpx 4rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			.taitop {
				display: flex;
				align-items: center;
				padding-bottom: 4rpx;
				position: relative;
				.jubox{
					position: absolute;
					top: 6rpx;
					right: 0rpx;
					width: 32rpx;
					height: 32rpx;
					border: 1px dashed #eeeeee;
				}
				.taihead {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.taiyou {
					padding: 0 12rpx;
					flex: 1;

					.yoa {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;

						.nametxt {
							font-size: 28rpx;
							color: #3D3D3D;
							padding-right: 8rpx;
							font-weight: bold;
						}

						.jipic {
							width: 41px;
							height:19px;
						}

						.biepic {
							width: 41px;
							height:19px;
							margin-left: 4px;
						}
					}

					.baobox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.baofen {
							padding: 2rpx 8rpx;
							background: rgba(243, 122, 165, 0.15);
							border-radius: 4px;
							margin-right: 8rpx;
							flex-shrink: 0;
							font-size: 20rpx;
							letter-spacing: 0.08em;
							color: #F37AA5;
						}

						.baotime {
							font-size: 24rpx;
							letter-spacing: 0em;
							color: #999999;
						}
					}
				}
			}

			.baotitle {
				font-size: 28rpx;
				color: #3D3D3D;
				padding-bottom: 6rpx;
			}

			.baotxt {
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 38rpx;
				padding-bottom: 20rpx;
			}

			.fupic {
				width: 100%;
				margin-bottom: 20rpx;
			}

			.erbox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.rili {
					background: rgba(153, 153, 153, 0.102);
					padding: 2px 8px 2px 6px;
					border-radius: 89px;
					font-family: 思源黑体;
					font-size: 12px;
					font-weight: bold;
					color: #999;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
			}
		}

		.winbox {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;

			.winli {
				display: flex;
				align-items: flex-start;
				padding: 20rpx 0;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.headpic {
					width: 80rpx;
					height: 80rpx;
					flex-shrink: 0;
				}

				.winyou {
					flex-grow: 1;
					padding-left: 12rpx;

					.wintop {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;

						.nametxt {
							font-size: 28rpx;
							color: #3D3D3D;
							padding-right: 8rpx;
							font-weight: bold;
						}

						.jipic {
							width: 41px;
							height:19px;
						}

						.biepic {
							width: 41px;
							height:19px;
							margin-left: 4px;
						}
					}

					.fuben {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
						line-height: 34rpx;
						padding-bottom: 15rpx;
					}

					.huifu {
						height: 52rpx;
						border-radius: 4px;
						margin: 15rpx 0;
						padding: 0 12rpx;
						line-height: 52rpx;
						background: #F8F8F8;
						font-size: 20rpx;
						color: #3D3D3D;
					}

					.windi {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.wintime {
							font-size: 20rpx;
							font-weight: normal;
							letter-spacing: 0em;
							color: #999999;
						}

						.zabox {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.zapic {
								width: 28rpx;
								height: 28rpx;
							}

							.zatxt {
								font-size: 20rpx;
								letter-spacing: 0.08em;
								color: #999999;
								padding-left: 8rpx;
							}
							.zaactive{
								color: #45C4B0;
							}
						}
					}
				}
			}
		}
		.pjbox{
			width: 100%;
			height: 98rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			left: 0;
			bottom: 0;
			.phput{
				height: 72rpx;
				border-radius: 71px;
				opacity: 1;
				background: #F8F8F8;
				padding: 0 24rpx;
				width: 546rpx;
			}
			.pjyou{
				text-align: center;
				padding-left: 20rpx;
				.pjpic{
					width: 36rpx;
					height: 36rpx;
					margin: 0 auto;
				}
				.pjtxt{
					font-size: 20rpx;
					text-align: center;
					color: #999999;
				}
				.txtactive{
					color: #45C4B0;
				}
				
			}
			.fatxt{
				font-size: 28rpx;
				font-weight: bold;
				color: #45C4B0;
				padding-left: 20rpx;
			}
		}
		.mask{
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;
			.matop:nth-child(2){
				margin-bottom: 20rpx;
			}
			.matop{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 50rpx ;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;
				.mapic{
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
				.matxt{
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
			.qubox{
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
	}
</style>